<template lang="pug">
  div.table-empty
    s-table(
      ref="table"
      :reqUrl="tableObj.url"
      :reqMethod="pageType === 'target'?'get':'post'"
      style="padding: 0"
      :column="tableObj.columnConfig"
      :filterProps="{fields: tableObj.seachConfig}"
    )
      .table-operator(slot="table-operator")
        el-button.gradientVertical(v-if="pageType === 'target'" size="large" round @click="copyCommon()") 自动创建
        el-button.gradientVertical(size="large" round @click="addHandle()") 新增
      template(slot="group" slot-scope="text, scope") {{scope.groupId === '0' ? '公共' : scope.areaId !== '0' ? '园所': '集团'}}
      template(slot="type" slot-scope="text, scope") {{dictFilter(text, 'xj_target_type')}}
      template(slot="target" slot-scope="text, scope") {{dictFilter(text, 'xj_target')}}
      template(slot="sortType" slot-scope="text, scope") {{dictFilter(scope.sort, 'xj_sort')}}
      <!--template(slot="conclusionType" slot-scope="text, scope") {{dictFilter(text, 'xj_conclusion_type')}}-->
      template(slot="recordType" slot-scope="text, scope") {{dictFilter(text, 'xj_record_type')}}
      template(slot="cycle" slot-scope="text, scope") {{dictFilter(text, 'xj_cycle')}}
      template(slot="status" slot-scope="text, scope") {{text === '0' ? '正常' : '停用'}}
      template(slot="whole" slot-scope="text, scope") {{text === '0' ? '是' : '否'}}
      template(slot="cardTime" slot-scope="text, scope") {{text | dateFilter('YYYY/MM/DD')}}
      template(slot="action" slot-scope="text, scope")
        el-link(v-if="pageType === 'type'" :underline="false" type="primary" @click="() => addHandle(scope, 'detail')") 查看
        el-link(:underline="false" v-if="pageType === 'target'" type="primary" @click="() => addHandle(scope, 'add')") 编辑
        el-link(:underline="false" v-if="showEdit(scope) && pageType === 'type'" type="primary" @click="() => addHandle(scope, 'add')") 编辑
        el-link(:underline="false" v-if="showEdit(scope) && pageType === 'type'" type="primary" @click="() => addHandle(scope, 'edit')") 检查项
        el-popconfirm(
          title="请确认是否停用"
          v-if="pageType === 'type' && scope.status === '0' && showEdit(scope)"
          @confirm="() => sendHandle(scope.id, 'stop')"
          @onConfirm="() => sendHandle(scope.id, 'stop')"
        )
          el-link(:underline="false" type="primary" slot="reference") 停用
        el-popconfirm(
          title="请确认是否启用"
          v-if="pageType === 'type' && scope.status === '1' && showEdit(scope)"
          @confirm="() => sendHandle(scope.id, 'using')"
          @onConfirm="() => sendHandle(scope.id, 'using')"
        )
          el-link(:underline="false" type="primary" slot="reference") 启用
        el-link.blue(v-if="pageType === 'target'" :underline="false" @click="() => cardHandle(scope.id)") 发卡
    add-drawer(:visible.sync="addVisible" :id="chosedObj.id" :info="chosedObj" :pageType="pageType" :operateType="operateType" @getList="refreshTable")
    detail-drawer(:visible.sync="detailVisible" :id="chosedObj.id" :info="chosedObj" :pageType="pageType" @getList="refreshTable")
    test-pro(:visible.sync="editVisible" :id="chosedObj.id" :typeInfo="chosedObj" :pageType="pageType" @getList="refreshTable")
    modal-form(
      title="发卡"
      :visible.sync="cardObj.visible"
      :fields="cardForm"
      :layoutCol="{sm:24, md: 24, lg: 24}"
      :submitting="sendSubmitting"
      :submitHandle="cardSubmit"
    )
</template>
<script>
import { api, sendCard, copyCommon, stopType, usingType } from './api'
import { targetColumnConfig, typeColumnConfig, targetSeachConfig, typeSeachConfig } from './config'
import AddDrawer from './components/add'
import DetailDrawer from './components/detail'
import TestPro from './components/testPro'
import { mapGetters } from 'vuex'

export default {
  components: {
    AddDrawer,
    DetailDrawer,
    TestPro
  },
  data () {
    return {
      loading: false,
      addVisible: false,
      detailVisible: false,
      editVisible: false,

      cardObj: {
        visible: false,
        id: ''
      },
      sendSubmitting: false,

      chosedObj: {},
      operateType: 'add'
    }
  },
  computed: {
    ...mapGetters(['user', 'curArea']),
    pageType () {
      return this.$route.path === '/operative/dailyAffairs/setting/target' ? 'target' : 'type'
    },
    tableObj () {
      const { pageType } = this
      return {
        url: pageType === 'target' ? api.targetList : api.list,
        columnConfig: pageType === 'target' ? targetColumnConfig : typeColumnConfig,
        seachConfig: pageType === 'target' ? targetSeachConfig : typeSeachConfig
      }
    },
    cardForm () {
      return [
        {
          key: 'cardCode',
          label: '卡号'
        }
      ]
    }
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    addHandle (obj = {}, type = 'add') {
      this.operateType = type
      this[`${type}Visible`] = true
      this.chosedObj = obj
    },
    $_handleCancel () {
      this.visibleDialog = false
    },

    // 发卡
    cardHandle (id) {
      console.log('cardHandle')
      this.cardObj = {
        visible: true,
        id
      }
      console.log(this.cardObj)
    },

    // 发卡
    cardSubmit (values) {
      const { cardObj } = this
      console.log(values)
      this.sendSubmitting = true
      sendCard({
        ...values,
        id: cardObj.id
      }).then(() => {
        this.$message.success('发卡成功')
        this.cardObj = {
          visible: false,
          id: ''
        }
        this.refreshTable()
      }).finally(() => {
        this.sendSubmitting = false
      })
    },

    copyCommon () {
      copyCommon().then(res => {
        console.log(res)
        this.refreshTable()
      })
    },

    sendHandle (id, type) {
      if (type === 'stop') {
        stopType({ targetId: id }).then(res => {
          this.refreshTable()
        })
      } else {
        usingType({ targetId: id }).then(res => {
          this.refreshTable()
        })
      }
    },

    showEdit (item) {
      if (item.groupId === '0') {
        return false
      }
      if (this.user.isGroupAdmin) {
        return true
      } else {
        if (item.areaId === this.curArea.areaId) {
          return true
        }
      }
      return false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
